<template>
	<view>
		<view class="status_bar">
			
		</view>
		<view class="navigation">
			<view class="folding"></view>
			<scroll-view class="classification" :scroll-x="true" :show-scrollbar="false">
				<button v-for="(item,index) of navBuList" :key="index" class="typeButton" type="primary" plain="true" size="mini">{{item}}</button>
			</scroll-view>
			<view class="search"></view>
		</view>
		<scroll-view class="content" :scroll-y="true" :show-scrollbar="false">
			<view class="top">
						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration" indicator-color="rgba(112,112,112,0.5)" indicator-active-color="#ff1493">
							<swiper-item v-for="(item,index) in bannerList" :key="index">
								<view  class="swiper-item">
									<image :src="item" class="bannerImg"></image>
								</view>
							</swiper-item>
						
						</swiper>
						
			</view>
			<view class="musicCardList" v-for="(item,index) of musicCardList" :key="index">
			<view class="cardListTitle"> {{item.cardListTitle}}</view>
			
			<scroll-view class="cards" :scroll-x="true" :show-scrollbar="false">
				
				<lCard v-for="(it,i) of item.cards" :key="i" :data="it" />
			</scroll-view>
			
						
			</view>
		</scroll-view>
		
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {
	    onLoad,
	    onShow
	  } from "@dcloudio/uni-app";
	import { getBannerApi } from '../../api/find';
	import lCard from "@/comp/lCard.vue"
	let bannerList=ref([])
	let indicatorDots=ref(true)
	let duration=ref(500)
	let autoplay=ref(true)
	let interval=ref(2000)
	let navBuList=ref([
		"民谣",
		"摇滚",
		"怀旧",
		"放克",
		"怀旧",
		"复古",
		"音乐节",
		"测试"
	])
	const getBanner=()=>{
		getBannerApi().then(res=>{
			
			bannerList.value=res.data
			// bannerList.value=res.data.data
		})
	}
	let musicCardList=ref([
		{
			cardListTitle:"甄选歌单",
			cards:[
				{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal',hear:'2595万'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'}
			]
		},{
			cardListTitle:"甄选歌单",
			cards:[
				{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'}
			]
		},{
			cardListTitle:"甄选歌单",
			cards:[
				{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'}
			]
		},{
			cardListTitle:"甄选歌单",
			cards:[
				{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'}
			]
		},{
			cardListTitle:"甄选歌单",
			cards:[
				{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'},{imgUrl:'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described:'低低吟唱的 是心跳不止 无所替代 lalalalalalalal'}
			]
		}
	])
	//onload页面只加载一次
	onLoad(()=>{
		// console.log(123)
		getBanner()
	})
</script>

<style lang="scss" scoped>
	.navigation{
		height: 100rpx;
		display: flex;
		.folding{
			// display: inline-block;
			// flex: ;
			height: 100%;
			width: 10%;
			background-image:url(@/static/folding.png);
			 background-size: 60% 60%;
			  background-repeat: no-repeat; 
			     background-position:center center;
		}
		.classification{
			width: 80%;
			white-space: nowrap; /* 横向不换行 */
			  overflow-x: auto; /* 横向滚动 */
			 -webkit-overflow-scrolling: touch; /* iOS滚动流畅性 */
			 
			.typeButton{
				height: 100%;
				line-height: 100rpx;
				border: 0px;
				// width: 100rpx;
				font-size: 30rpx;
				color: #888888;
				padding-left: 5px;
				
			}
		}
		
		.search{
			width: 15%;
			background-image:url(@/static/search.png);
			 background-size: 45% 45%;
			  background-repeat: no-repeat; 
			     background-position:center center;
		}
	}
	.content{
		
		height: calc(100vh - 100rpx - var(--status-bar-height)  );
		overflow-y: auto; /* 横向滚动 */
		-webkit-overflow-scrolling: touch; /* iOS滚动流畅性 */
		background-color: #F8F9FD;
		
		.top{
			height:280rpx;
			// background-color: aquamarine;
			.swiper{
				height:100%;
				// border-radius: 5px;
				
				.swiper-item{
					padding: 5px 25rpx ;
					border-radius: 5px;
					.bannerImg{
						width: 100%;
						height: calc(280rpx - 10px);
						border-radius: 5px;
					}
				}
				
			}
			
		}
		// .musicCardList{
			
		// 	padding: 50rpx 10rpx 20rpx 10rpx;
		// 	color: #888888;
		// 	.cardListTitle{
		// 		font-weight:600;
		// 		font-size: 30rpx;
		// 		margin-bottom: 20rpx;
		// 		color: #28323D;
		// 	}
		// 	.cards{
		// 		// overflow: hidden;
		// 		 white-space: nowrap;
				
		// 	}
			
		// }
		
	}
	
	       
</style>
